<template>
	<view class="page-myuser text-kaiti">
		<view class="header">
			<view class="dim"></view>
			<!-- <view class="arc"></view> -->
			<view class="dim-two"></view>
			<view class="header-icon u-flex u-row-between">
				<u-icon name="saomiao" custom-prefix="custom-icon" size="50" color="#fff"></u-icon>
				<u-icon name="xiaoxi" custom-prefix="custom-icon" size="50" color="#fff" 
				@click="goNextPage('to','/pages/HomeLnner/information/information')"></u-icon>
				<u-icon name="shezhi" custom-prefix="custom-icon" size="50" color="#fff" 
				@click="goNextPage('to','/pages/HomeLnner/set-up/set-up')"></u-icon>
			</view>
			<view class="sign-in u-flex u-row-center" @click="goNextPage('to','/pages/HomeLnner/sign-in/sign-in')">
				<u-icon name="qiandao" 
				custom-prefix="custom-icon" 
				class="u-margin-left-20 u-margin-right-10"
				size="30" color="#fff"></u-icon>
				签到领积分
			</view>
			<view class="user-info u-flex ">
				<view class="left u-margin-right-30">
					<image v-if = "$store.state.token"  :src="logo.slice(0,4) == 'http'? logo :$baseUrl+logo" mode="aspectFill"></image>
					<image v-else src="/static/common/pic.png"></image>
				</view>
				<view class="right">
					<view class="nickname" @click="goLogin">
						{{nickname}}
					</view>
					<view class="phone" v-if="nickname!='登录'">
						手机号：{{phone}}
					</view>
				</view>
			</view>
		</view>
		<view class="account">
			<view class="lable">
				我的账户
			</view>
			<view class="account-info-warp u-flex u-row-between">
				<view class="account-info">
					<view class="lable-second">
						我的积分
					</view>
					<u-count-to :bold="true" font-size="30" class="account-num" :start-val="0" :end-val="integral || 0"></u-count-to>
					<view class="account-icon-wrap">
						<view class="account-icon-left">
						</view>
						<view class="account-icon-right u-flex u-row-center u-col-center">
							<u-icon name="jifen" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
				</view>
				<view class="account-info">
					<view class="lable-second">
						我的钱包
					</view>
					<u-count-to :bold="true" font-size="30" class="account-num" :start-val="0" :end-val="money" :decimals="2"></u-count-to>
					<view class="account-icon-wrap">
						<view class="account-icon-left">
						</view>
						<view class="account-icon-right u-flex u-row-center u-col-center">
							<u-icon name="licai" custom-prefix="custom-icon" size="20" color="#fff"></u-icon>
						</view>
					</view>
				</view>
				<!-- <view class="account-info">
					<view class="lable-second">
						我的商城
					</view>
					<u-count-to :bold="true" font-size="30" class="account-num" :start-val="0" :end-val="500"></u-count-to>
					<view class="account-icon-wrap">
						<view class="account-icon-left">
						</view>
						<view class="account-icon-right u-flex u-row-center u-col-center">
							<u-icon name="shangcheng" custom-prefix="custom-icon" size="20" color="#fff"></u-icon>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="user-common-warp">
			<view class="common-lable">
				我的档案
			</view>
			<view class="common-item-box-warp u-flex u-row-between">
				<view class="common-item-box u-flex u-col-center" 
				@click="goNextPage('to','/pages/HomeLnner/my-files/my-files',
				{stype:0,cmd:'mMemFav_list_proc',title:'我的收藏'})">
					<view class="common-item-left l-bg-1 u-flex u-col-center u-row-center bg-w-3">
						<view class="icon-bg d-bg-1 u-flex u-col-center u-row-center">
							<u-icon name="shoucang" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							我的收藏
						</view>
						<view class="common-third-lable">
							工程圈收藏
						</view>
					</view>
				</view>
				<view class="common-item-box u-flex u-col-center" 
				@click="goNextPage('to','/pages/HomeLnner/my-files/my-files',
				{stype:2,cmd:'mMemFav_list_proc',title:'我的关注'})">
					<view class="common-item-left l-bg-2 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-2 u-flex u-col-center u-row-center">
							<u-icon name="chakantieziguanzhu" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							我的关注
						</view>
						<view class="common-third-lable">
							工程圈收藏
						</view>
					</view>
				</view>
			</view>
			<view class="common-item-box-warp u-flex u-row-between">
				<view class="common-item-box u-flex u-col-center"
				@click="goNextPage('to','/pages/HomeLnner/my-files/my-files',
				{stype:1,cmd:'mMemFav_list_proc',title:'我的点赞'})">
					<view class="common-item-left l-bg-3 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-3 u-flex u-col-center u-row-center">
							<u-icon name="dianzan" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							我的点赞
						</view>
						<view class="common-third-lable">
							点赞记录
						</view>
					</view>
				</view>
				<view class="common-item-box u-flex u-col-center" 
				@click="goNextPage('to','/pages/HomeLnner/my-download/my-download')">
					<view class="common-item-left l-bg-4 u-flex u-col-center u-row-center bg-w-4">
						<view class="icon-bg d-bg-4 u-flex u-col-center u-row-center bg-i-4">
							<u-icon name="cangpeitubiao_xiazaipandiandanxiazaidayinmoban" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							我的下载
						</view>
						<view class="common-third-lable">
							课程资料下载
						</view>
					</view>
				</view>
			</view>
			<view class="common-item-box-warp u-flex u-row-between">
				<view class="common-item-box u-flex u-col-center"
				@click="goNextPage('to','/pages/HomeLnner/my-files/my-files',
					{cmd:'mShare_list_proc',title:'我的分享'})">
					<view class="common-item-left l-bg-5 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-5 u-flex u-col-center u-row-center">
							<u-icon name="fenxiang" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							我的分享
						</view>
						<view class="common-third-lable">
							分享得好礼
						</view>
					</view>
				</view>
				<view class="common-item-box u-flex u-col-center"
				@click="goNextPage('to','/pages/HomeLnner/my-files/my-files',
					{cmd:'vsCommentM_list',title:'我的评价'})">
					<view class="common-item-left l-bg-6 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-6 u-flex u-col-center u-row-center">
							<u-icon name="pingjia" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							我的评价
						</view>
						<view class="common-third-lable">
							发布评价
						</view>
					</view>
				</view>
			</view>
			<view class="common-item-box-warp u-flex u-row-between">
				<view class="common-item-box u-flex u-col-center" 
					@click="goNextPage('to','/pages/HomeLnner/my-files/my-files',
					{stype:2,cmd:'mMemViewLog_list_procqdrl',title:'我的足迹'})">
					<view class="common-item-left l-bg-7 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-7 u-flex u-col-center u-row-center">
							<u-icon name="zuji" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							我的足迹
						</view>
						<view class="common-third-lable">
							浏览记录
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="user-common-warp">
			<view class="common-lable">
				个性服务
			</view>
			<view class="common-item-box-warp u-flex u-row-between">
				<view class="common-item-box u-flex u-col-center" 
				@click="goNextPage('to','/pages/HomeLnner/device-mylist/device-mylist',
				{title:'工程圈',cmdList:'mDynamic_mylist',cmdDel:'mDynamic_delete'})">
					<view class="common-item-left l-bg-8 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-8 u-flex u-col-center u-row-center">
							<u-icon name="fabu" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							工程圈发布
						</view>
						<view class="common-third-lable">
							需求发布
						</view>
					</view>
				</view>
				<view class="common-item-box u-flex u-col-center"
				@click="goNextPage('to','/pages/HomeLnner/device-mylist/device-mylist',
				{title:'设备租售',cmdList:'nDevice_mylist',cmdDel:'nDevice_delete'})">
					<view class="common-item-left l-bg-9 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-9 u-flex u-col-center u-row-center">
							<u-icon name="renew" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							设备租售
						</view>
						<view class="common-third-lable">
							推荐得好礼
						</view>
					</view>
				</view>
			</view>
			<view class="common-item-box-warp u-flex u-row-between">
				<view class="common-item-box u-flex u-col-center" 
				@click="goNextPage('to','/pages/HomeLnner/my-upload-list/my-upload-list',
				{title:'我的上传',cmdList:'nUpFiles_mylist',cmdDel:'nUpFiles_delete'})">
					<view class="common-item-left l-bg-10 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-10 u-flex u-col-center u-row-center">
							<u-icon name="shangchuan" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							我的上传
						</view>
						<view class="common-third-lable">
							发布评价
						</view>
					</view>
				</view>
				<!-- <view class="common-item-box u-flex u-col-center">
					<view class="common-item-left l-bg-11 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-11 u-flex u-col-center u-row-center">
							<u-icon name="dianzan" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							朋友推荐
						</view>
						<view class="common-third-lable">
							纠错改错
						</view>
					</view>
				</view> -->
				<view class="common-item-box u-flex u-col-center"
				@click="goNextPage('to','/pages/HomeLnner/resume/resume')">
					<view class="common-item-left l-bg-11 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-11 u-flex u-col-center u-row-center">
							<u-icon name="flow-resume" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							在线简历
						</view>
						<view class="common-third-lable">
							查看简历模板
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 游戏中心 -->
		<view class="user-common-warp">
			<view class="common-lable u-flex u-row-between">
				<span class="common-lable-left">游戏中心</span>
				<view class="look-more">
					查看更多
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
			<view class="game-warp u-flex u-row-between">
				<view class="game-item" v-for="(item,index) in gameList.slice(0,4)" :key="index" @click="towebview(item.link)">
					<view class="game-icon">
						<image :src="$baseUrl + item.img" mode=""></image>
					</view>
					<view class="game-name">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<!-- 广告 -->
		<view class="advert" v-for="(item,index) in adList" :key="index">
			<image :src="$baseUrl + item.img" mode="widthFix"></image>
		</view>
		<view class="user-common-warp">
			<view class="common-lable">
				帮助与反馈
			</view>
			<view class="common-item-box-warp u-flex u-row-between">
				<view class="common-item-box u-flex u-col-center" @click="goNextPage('to','/pages/HomeLnner/question/question')">
					<view class="common-item-left l-bg-13 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-13 u-flex u-col-center u-row-center">
							<u-icon name="changjianwentixiangguanwenti" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							常见问题
						</view>
						<view class="common-third-lable">
							账号登录异常问题
						</view>
					</view>
				</view>
				<view class="common-item-box u-flex u-col-center" 
				@click="goNextPage('to','/pages/HomeLnner/help/help',{cmd:'nAbout_query_proc',id:'1006',title:'联系我们'})">
					<view class="common-item-left l-bg-14 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-14 u-flex u-col-center u-row-center">
							<u-icon name="htmal5icon31" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							联系我们
						</view>
						<view class="common-third-lable">
							在线专属客服
						</view>
					</view>
				</view>
			</view>
			<view class="common-item-box-warp u-flex u-row-between">
				<view class="common-item-box u-flex u-col-center"
				@click="goNextPage('to','/pages/HomeLnner/help/help',{cmd:'nAbout_query_proc',id:'1008',title:'免责协议'})">
					<view class="common-item-left l-bg-15 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-15 u-flex u-col-center u-row-center">
							<u-icon name="flow-resume" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							免责协议
						</view>
						<view class="common-third-lable">
							查看协议
						</view>
					</view>
				</view>
				<view class="common-item-box u-flex u-col-center"
				@click="goNextPage('to','/pages/HomeLnner/error-recovery/error-recovery')">
					<view class="common-item-left l-bg-16 u-flex u-col-center u-row-center">
						<view class="icon-bg d-bg-16 u-flex u-col-center u-row-center">
							<u-icon name="hezuo" custom-prefix="custom-icon" size="30" color="#fff"></u-icon>
						</view>
					</view>
					<view class="common-item-right">
						<view class="common-second-lable">
							纠错建议
						</view>
						<view class="common-third-lable">
							诚信共建共赢
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view> 
</template>

<script>
	import {commonGet,proComGet} from "@/api/commonapi.js"
	export default{
		data(){
			return{
				nickname:"",
				phone:"",
				logo:"",
				money:"",
				integral:"",
				gameList:[],
				adList:[],
				$baseUrl:"",
			}
		},
		computed:{
		},
		onLoad() {
			this.$baseUrl = this.baseUrl
			this.init()
			if(!this.$store.state.token){
				this.integral = "0"
			}else{
				this.getData()
			}
		},
		methods:{
			goNextPage(type,url,params){
				if(this.$store.state.token){
					this.$u.route({
						type:type,
						url: url,
						params:params
					})
				}else{
					this.$refs.uToast.show({
						title: '请先登录',
						url: '/pages/myuser/user/UserInfo',
						duration:300,
					})
				}
			},
			init(){
				if(!this.$store.state.token){
					this.nickname = "登录"
				}else{
					if(this.$store.state.userIn){
						this.phone = JSON.parse(this.$store.state.userIn).username
						this.logo = JSON.parse(this.$store.state.userIn).logo
						this.nickname = JSON.parse(this.$store.state.userIn).nickname || "暂无昵称"
					}
				}
			},
			getData(){
				let query = {
					ak:this.$store.state.token,
					cmd:"mMember_query_proc_getmeapp",
					para:JSON.stringify({})
				}
				commonGet(query,({Data})=>{
					if(Data != "{}"){
						this.money = Data._money
						this.integral = parseInt(Number(Data._integral))
						this.gameList = JSON.parse(Data.Datas1[0].items)
						this.adList = JSON.parse(Data.Datas2[0].items)
					}
				})
			},
			goLogin(){
				if(this.nickname == '登录'){
					this.$u.route("/pages/myuser/user/UserInfo");
				}
			},
			externalLinks(link){
				// // #ifdef APP-PLUS
				// 	this.linkUrl = link
				// // #endif
				// // #ifdef H5
				// 	window.location.href = link
				// // #endif
			},
			towebview(url){
				uni.navigateTo({
					url: '/pages/HomeLnner/webview/webview?url='+url
				});
			}
		},
		onShow() {
			this.init()
			this.getData()
		}
	}
</script>

<style lang="scss">
	.page-myuser{
		background-color: #ededed;
		min-height: 100%;
		overflow: hidden;
	}
	.header{
		height: 316rpx;
		width: 100%;
		background-color: #ec1111;
		position: relative;
		&::after { 
			content: '';
			width: 140%; 
			height: 140rpx; 
			position: absolute; 
			left: -20%; 
			bottom: -60rpx;  
			border-radius: 0 0 50% 50%; 
			background: #ec1111;
		}
		.dim{
			width: 130rpx;
			height: 130rpx;
			background-color: #fff;
			border-radius: 50%;
			background: linear-gradient(to bottom right,rgba(255,255,255,0.8),rgba(255,255,255,0.3),rgba(255,255,255,0));
			filter:blur(10px);
			position: absolute;
			top: 50rpx;
			left: -10rpx;
		}
		.dim-two{
			width: 100rpx;
			height: 100rpx;
			background-color: #fff;
			border-radius: 50%;
			background: linear-gradient(to bottom right,rgba(255,255,255,0.8),rgba(255,255,255,0));
			filter:blur(10px);
			position: absolute;
			top: 146rpx;
			right: 30rpx;
			border: 1px solid;
		}
		// .arc{
		// 	position: absolute;
		// 	right: -100px;
		// 	bottom: 0;
		// 	width: 900px;
		// 	height: 900px;
		// 	border: 1px solid rgba(255,255,255,0.1);
		// 	border-radius: 100%;
		// 	background: linear-gradient(to top left,rgba(255,255,255,0.3),rgba(255,255,255,0));
		// }
		.header-icon{
			position: absolute;
			width: 200rpx;
			top: 75rpx;
			right: 45rpx;
		}
		.sign-in{
			animation: signin 1s;
			z-index: 10;
			position: absolute;
			right: 0;
			top: 176rpx;
			width: 190rpx;
			height: 52rpx;
			color: #fff;
			border-radius: 52rpx 0 0 52rpx;
			background-color: #e8ca64;
			font-size: 22rpx;
		}
		@keyframes  signin{
			from{right: -190rpx;}
			to{right: 0;}
		}
		.user-info{
			z-index: 10;
			position: absolute;
			left: 30rpx;
			top: 154rpx;
			// width: 396rpx;
			height: 104rpx;
			color: #fff;
			.left{
				width: 104rpx;
				height: 104rpx;
				overflow: hidden;
				image{
					border-radius: 100%;
					width: 100rpx;
					height: 100rpx;
				}
			}
			.right{
				height: 82rpx;
				.nickname{
					width: 300rpx;
					font-size: 38rpx;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.phone{
					font-size: 22rpx;
				}
			}
		}
	}
	.account{
		transform: translateY(-30rpx);
		z-index: 10;
		margin: 0 30rpx 0 30rpx;
		border-radius: 20rpx;
		padding: 20rpx 34rpx;
		background-color: #fff;
		.lable{
			font-size: 30rpx;
			font-weight: bold;
		}
		.account-info-warp{
			.account-info{
				position: relative;	
				border-radius: 10rpx;
				background-color: #f5f4f9;
				// width: 193rpx;
				width: 293rpx;
				height: 100rpx;
				margin-top: 26rpx;
				padding: 20rpx;
				.lable-second{
					color: #8e959b;
					font-size: 20rpx;
				}
				.account-icon-wrap{
					.account-icon-left{
						position: absolute;
						right: 46rpx;
						bottom: 0;
						width: 16rpx;
						height: 32rpx;
						background-color: #f5e4da;
						border-top-left-radius: 10rpx;
					}
					.account-icon-right{
						position: absolute;
						right: 0;
						bottom: 0;
						border-top-left-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
						width: 46rpx;
						height: 40rpx;
						background-color: #ff956e;
						opacity:0.6;
					}
				}
			}
			.account-info:nth-child(2){
				.account-icon-left{
					background-color: #c3e9f4;
				}
				.account-icon-right{
					background-color: #59d2eb;
				}
			}
			.account-info:nth-child(3){
				.account-icon-left{
					background-color: #e3d4ff;
				}
				.account-icon-right{
					background-color: #ba92f9;
				}
			}
		}
	}
	.user-common-warp{
		margin: 0 30rpx 30rpx 30rpx;
		padding: 36rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.common-lable{
			font-size: 30rpx;
			font-weight: bold;
			.common-lable-left{
				display: inline-block;
			}
			.look-more{
				font-size: 22rpx;
				color: #999;
				font-weight: normal;
			}
		}
		.common-item-box-warp{
			.common-item-box{
				margin-top: 24rpx;
				width: 310rpx;	
				height: 120rpx;
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: 0 0 16rpx rgba(0,0,0,0.1);
				.common-item-left{
					width: 60rpx;
					height: 60rpx;
					margin: 0 20rpx;
					border-radius: 100%;
					// background: linear-gradient(to top,#b5ffe9,#fff);
					image{
						width: 60rpx;
						height: 60rpx;
					}
					.icon-bg{
						width: 46rpx;
						height: 46rpx;
						// background: linear-gradient(to top,#26bb8e,#98f4d8);
						border-radius: 100%;
					}
				}
				
				.common-item-right{
					.common-second-lable{
						font-size: 28rpx;
						font-weight: bold;
					}
					.common-third-lable{
						font-size: 24rpx;
						color: #808080;
					}
				}
			}
		}
		.game-warp{
			.game-item{
				margin-top: 35rpx;
				.game-icon{
					width: 52rpx;
					height: 52rpx;
					margin: 0 auto 23rpx;
					border-radius: 10rpx;
					overflow: hidden;
					image{
						width: 52rpx;
						height: 52rpx;
					}
				}
				.game-name{
					font-size: 24rpx;
					font-weight: bold;
				}
			}
		}
	}
	.advert{
		width: auto;
		height: 114rpx;
		margin: 0 30rpx 30rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		image{
			width: 100%;
			height: 114rpx;
		}
	}
	// icon浅色背景
	.l-bg-1{ @include icon-bg(#b4ffe9,#fff)}
	.l-bg-2{ @include icon-bg(#cafcdd,#fff)}
	.l-bg-3{ @include icon-bg(#becfff,#fff)}
	.l-bg-4{ @include icon-bg(#ffe5ba,#fff)}
	.l-bg-5{ @include icon-bg(#ffcec6,#fff)}
	.l-bg-6{ @include icon-bg(#ffe5ba,#fff)}
	.l-bg-7{ @include icon-bg(#ffe5ba,#fff)}
	.l-bg-8{ @include icon-bg(#d9fcff,#fff)}
	.l-bg-9{ @include icon-bg(#e5d6ff,#fff)}
	.l-bg-10{ @include icon-bg(#becfff,#fff)}
	.l-bg-11{ @include icon-bg(#d9fcff,#fff)}
	.l-bg-12{ @include icon-bg(#e5d6ff,#fff)}
	.l-bg-13{ @include icon-bg(#ffe5ba,#fff)}
	.l-bg-14{ @include icon-bg(#cafcdd,#fff)}
	.l-bg-15{ @include icon-bg(#ffe5ba,#fff)}
	.l-bg-16{ @include icon-bg(#e5d6ff,#fff)}
	// icon深色背景
	.d-bg-1{ @include icon-bg(#25bb8d,#5adfb9)}
	.d-bg-2{ @include icon-bg(#49b871,#85e5a9)}
	.d-bg-3{ @include icon-bg(#257af7,#3eb0fe)}
	.d-bg-4{ @include icon-bg(#f5781a,#ffb426)}
	.d-bg-5{ @include icon-bg(#ff615a,#ff9374)}
	.d-bg-6{ @include icon-bg(#fc8238,#ffab61)}
	.d-bg-7{ @include icon-bg(#f4771a,#feb427)}
	.d-bg-8{ @include icon-bg(#1bbbd1,#57ecf0)}
	.d-bg-9{ @include icon-bg(#9456fd,#b983f4)}
	.d-bg-10{ @include icon-bg(#2579f7,#3eb1ff)}
	.d-bg-11{ @include icon-bg(#1bbbd1,#57ebef)}
	.d-bg-12{ @include icon-bg(#9253fe,#d1acf8)}
	.d-bg-13{ @include icon-bg(#fc8237,#ffab62)}
	.d-bg-14{ @include icon-bg(#24b98c,#5be0b9)}
	.d-bg-15{ @include icon-bg(#f57c1b,#feb327)}
	.d-bg-16{ @include icon-bg(#9253fe,#d1acf8)}
</style>
   